<template>
  <div class="home">
    <Nav :title="title" :back="back"></Nav>
    <div class="main">
      <van-search v-model="searchContent" placeholder="请输入搜索关键词" @input="search(searchContent)" />
      <div class="item movieListItem" v-if="searchResult.length!=0&&searchResult[0]!='无结果'">
        <movieItem v-for="item in searchResult" :key="item.title" :value="item"></movieItem>
      </div>
      <div class="noRes" v-if="searchResult[0]=='无结果'" >无结果</div>
      <div class="container" v-show="searchResult.length==0" v-for="item in value" :key="item.title">
        <div class="nav">
          <span class="title">{{ item.title }}</span>
          <span class="more" @click="more(item.class,item.title)">更多></span>
        </div>
        <div class="movieListItem">
          <movieItem v-for="e in item.res" :key="e.index" :value="e"></movieItem>
        </div>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import movieItem from "../components/MovieItem";
import movie from "../models/movie";
import movieSearch from "../models/movieSearch";
import Nav from "../components/Nav";
export default {
  data() {
    return {
      title: "光与影",
      back:"/",
      value: [],
      searchContent: "",
      searchResult: []
    };
  },
  components: {
    movieItem,
    Nav
  },
  async mounted() {
    var inTheaters = await movie("inTheaters");
    var comingSoon = await movie("comingSoon");
    var top250 = await movie("top250");
    this.value = [
      {
        title: "正在热映",
        class: "inTheaters",
        res: inTheaters.data.res.slice(0, 3)
      },
      {
        title: "即将上映",
        class: "comingSoon",
        res: comingSoon.data.res.slice(0, 3)
      },
      {
        title: "Top250",
        class: "top250",
        res: top250.data.res.slice(0, 3)
      }
    ];
    console.log(this.value);
  },
  methods: {
    // 搜索功能
    async search(v) {
      console.log(v);
      if (v.trim() != "") {
        var searchResult = await movieSearch(v);
        if (searchResult.data.result) {
          this.searchResult = searchResult.data.result;
        } else {
          this.searchResult = ["无结果"];
        }
        console.log('searchResult',this.searchResult);
      } else {
        this.searchResult = [];
      }
    },
    // 点击更多
    more(c,title){
      console.log(c,title);
      this.$router.push(`/movieMore?c=${c}&title=${title}`)
    }
  }
};
</script>

<style scoped>
.container {
  margin-bottom: 40px;
  background-color: #fff;
}
.movieListItem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.nav {
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
}
.more {
  color: cornflowerblue;
}
.noRes {
  text-align: center;
}
</style>